<template>
  <div >
    <div class="content-section" >
      <el-row>
        <el-col :span="24">
          <el-col :span="12">
            <div class="main-image" >
              <img width="350" height="350" src="@/assets/design.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
            </div>
          </el-col>
          <el-col :span="12" style="padding: 50px">
            <div class="content">
              <h2>电路仿真软件</h2>
              <p>Quartus II design 是最高级和复杂的，用于system-on-a-programmable-chip (SOPC)的设计环境。 <br>Quartus II design是唯一一个包括以timing closure 和 基于块的设计流为基本特征的programmable logic device (PLD)的软件。<br>Quartus II 设计软件改进了性能、提升了功能性、解决了潜在的设计延迟等，在工业领域率先提供FPGA与mask-programmed devices开发的统一工作流程。</p>
              <el-button type="primary" >
                <el-link :underline="false" href="https://www.intel.cn/content/www/cn/zh/software/programmable/quartus-prime/download.html" target="_blank">点击下载</el-link>
              </el-button>
              <el-button type="success">本地打开</el-button>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <div class="content-section even">
      <el-row>
        <el-col :span="24">
          <el-col :span="12">
            <div class="main-image" >
              <img width="350" height="350" src="@/assets/simulation.gif" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
            </div>
          </el-col>
          <el-col :span="12" style="padding: 20px">
            <div class="content">
              <h2>虚拟仿真</h2>
              <p>利用模型复现实际系统中发生的本质过程，并通过对系统模型的实验来研究存在的或设计中的系统，又称模拟。这里所指的模型包括物理的和数学的，静态的和动态的，连续的和离散的各种模型。<br>仿真的重要工具是计算机。仿真与数值计算、求解方法的区别在于它首先是一种实验技术。仿真的过程包括建立仿真模型和进行仿真实验两个主要步骤。</p>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <div class="content-section">
      <el-row>
        <el-col :span="24">
          <el-col :span="12" style="padding: 50px">
            <div class="content">
              <h2>上传仿真截图</h2>
              <p>仿真，字面上讲就是模拟真实状况。 我们FPGA设计里面的仿真，就是模拟真实电路的状况，查看电路是不是我们需要的电路。 如果我们把FPGA开发形成电路当作一个产品的生产过程，那么在FPGA开发流程中含有的三种仿真（RTL级仿真、静态仿真和时序仿真）就好比产品线中的三道检测站。</p>
              <el-upload
                class="upload-demo"
                ref="upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false">
                <el-button slot="trigger"  type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;"  type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="main-image" >
              <img width="350" height="350" src="@/assets/embedded_workflow.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style Lang="less" scoped>
/*darkBlueBackground.css imported in index.js*/
/*.content-section {background: #022e5f;color: #ffffff;padding: 30px 0;}
.content-section h2 {font-size: 40px;line-height: 1.2;margin-top: 0;}
.content-section h2 {border-bottom: 2px solid #1c79b3;margin-bottom: 20px;padding-bottom: 20px;}
.content-section br {margin: 10px 0;display: block;content: "";}
.content-section p {line-height: 1.9;}
.content-section.even {background: #09233c;}*/

.el-row{
  margin-bottom: 0;
}

.el-link.el-link--default {
  color: #fff;
}

.el-upload__tip {
  font-size: 12px;
  color: #fff;
  margin-top: 7px;
}

/deep/.el-upload-list__item:hover {
  background-color: #409eff;
}

/deep/.el-upload-list__item-name{
  color: #fff;
}
/deep/.el-upload-list__item-name [class^=el-icon]{
  color: #fff;
}

/*how to overwrite the style of el-main?*/
/deep/.el-main{
  padding: 0 ;
}

.grid-content {
  min-height: 100px;
}

</style>
